<template>
<div class="firstVue">
  <el-input v-model="name" placeholder="搜索GitHub大佬" @keydown.enter.native="search" style="margin: 20px 0;width: 470px;"></el-input>
  <!--<input type="text" placeholder="enter the name you search" v-model="name" v-on:keydown.enter="search"/>-->
  <!--:summary-method="getSummaries" 底部合计行计算方法 show-summary  是否显示底部行-->
  <el-table :data="Item" style="width: 100%" max-height="520" highlight-current-row v-show="Item.length>0" border @selection-change="handleSelectionChange">
    <el-table-column fixed type="index"></el-table-column>
    <el-table-column fixed type="selection" width="40"></el-table-column>
    <el-table-column prop="login" label="昵称" width="250" show-overflow-tooltip></el-table-column>
    <el-table-column prop="avatar_url" label="头像" width="120">
      <template slot-scope="scope">
        <img :src="scope.row.avatar_url" style="width: 30px;height:30px;">
      </template>
    </el-table-column>
    <el-table-column prop="id" label="Id" width="180"></el-table-column>
    <el-table-column prop="score" label="分数" width="180"></el-table-column>
    <el-table-column prop="type" label="类型" width="120"></el-table-column>
    <el-table-column prop="node_id" label="节点Id" width="200" show-overflow-tooltip></el-table-column>
    <el-table-column prop="html_url" label="个人主页" width="200">
      <template slot-scope="scope">
        <a :href="scope.row.html_url">{{scope.row.login}}</a>
      </template>
    </el-table-column>
    <el-table-column fixed="right" label="操作" width="66">
      <template slot-scope="scope">
        <el-button type="danger" @click.native.prevent="deleteRow(scope, Item)" icon="el-icon-delete" circle></el-button>
      </template>
    </el-table-column>
  </el-table>
</div>
</template>
<script>
export default {
  name: 'First',
  data () {
    return {
      msg: 'Welcome to My First VueApp',
      name: '',
      Item: [],
      multipleSelection: []
    }
  },
  methods: {
    getSummaries (param) {
      console.log(param)
      const { columns, data } = param
      const sums = []
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '合计'
          return
        } else if (index === 1) {
          sums[index] = this.multipleSelection.length
          return
        }
        const values = data.map(item => Number(item[column.property]))
        if (!values.every(value => isNaN(value))) {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr)
            if (!isNaN(value)) {
              return prev + curr
            } else {
              return prev
            }
          }, 0)
          sums[index] += ' 元'
        } else {
          sums[index] = 'N/A'
        }
      })
      console.log(sums)
      return sums
    },
    handleSelectionChange (val) {
      this.multipleSelection = val
      console.log(this.multipleSelection)
    },
    deleteRow (scope, rows) {
      console.log(scope)
      this.$confirm(`是否删除${scope.row.login}`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        rows.splice(scope.row.index, 1)
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      })
    },
    search () {
      const url = `https://api.github.com/search/users?q=${this.name}`
      this.$get(url, {})
        .then(response => {
          // 成功了, 更新数据(成功)
          this.Item = response.items
        })
        .catch(() => {
          // 失败了, 更新数据(失败)
        }).finally(() => {

        })
    }
  }
}
</script>

<style scoped>
  .firstVue{
    font-size: 36px;
    color:#42b983;
    width: 100%;
    height: 100%;
    text-align: center;
  }
</style>
